<template>
  <!-- 组件根标签 -->
  <div class="av">
    <div class="top">
      <!-- 顶部导航栏 -->
      <van-nav-bar>
        <template #title>
          问答
        </template>
        <template #left>
          <div class="myicon"><van-icon name="arrow-left" /></div
        ></template>
      </van-nav-bar>
    </div>
    <div class="question">
      <div class="cellContent" v-for="(val, index) in 3" :key="index">
        <div class="content">
          <div class="word">黑马问答</div>
        </div>
        <div class="avatar">
          <img
            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1818425713,2526604944&fm=11&gp=0.jpg"
            alt=""
          />
          <p class="nickname">搞笑的奇葩坊</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {}
  },
  methods: {},
  components: {}
}
</script>
<style lang="less" scoped>
.av {
  background-color: #f5f7f9;
  margin-bottom: 50px;
  .top {
    /deep/ .van-nav-bar__content {
      background-color: #3296fa;
    }
    /deep/ .van-nav-bar__title.van-ellipsis {
      color: #fff;
    }
    .myicon {
      /deep/ i.van-icon.van-icon-arrow-left {
        color: #fff;
        font-size: 26px;
      }
    }
  }
  .question {
    background-color: rgb(245, 247, 249);
    margin: 50px;
    .cellContent {
      .content {
        margin: 20px 0 10px -14px;
        width: 300px;
        height: 200px;
        line-height: 200px;
        background-color: rgb(62, 157, 248);
        .word {
          color: #fff;
          font-size: 30px;
          text-align: center;
        }
      }
      .avatar {
        margin-right: 10px;
        margin-top: 20px;
        img {
          float: left;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .nickname {
          height: 40px;
          font-size: 16px;
          line-height: 40px;
        }
      }
    }
  }
}
</style>
